<!--  -->
<template>
  <div class="temlateSearch">
    <a-form layout="inline">
      <a-form-item label="模板名称">
        <a-input
          v-model:value="param.templateName"
          allow-clear
          placeholder="请输入模板名称"
        />
      </a-form-item>
      <a-form-item label="状态">
        <a-select allowClear style="width: 120px" v-model:value="param.status">
          <template v-for="item in water_template_status" :key="item">
            <a-select-option :value="item.value">
              {{ item.label }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="searchTemplateList">查询</a-button>
      </a-form-item>
    </a-form>
  </div>
  <div>
    <a-spin size="large" :spinning="spinning">
      <div
        class="TemplateList"
        ref="scroll"
        id="TemplateList"
        v-if="templateLists.records.length"
      >
        <template v-for="item in templateLists.records" :key="item">
          <div class="templateItem">
            <div class="img">
              <a-image
                class="ant_img"
                width="100%"
                :src="item.previewImg"
                :alt="item.templateName"
              />
              <div
                class="templateStatus"
                :style="{
                  background: item.status == 0 ? '#faad14' : '#52c41a',
                }"
              >
                {{ item.status == 0 ? '未发布' : '已发布' }}
              </div>
              <div
                :class="[
                  item.isShowRrmark ? 'activeRemark' : 'unactiveRemark',
                  'remarkContext',
                ]"
                @click.stop="item.isShowRrmark = !item.isShowRrmark"
              >
                <p v-if="item.remark">{{ item.remark }}</p>
                <a-empty v-else description="暂无备注哦~" />
              </div>
            </div>
            <div class="templateName">
              <div class="left">
                <a-tooltip placement="bottomLeft">
                  <template #title>
                    {{ item.templateName }}
                  </template>
                  {{ item.templateName }}
                </a-tooltip>
              </div>
              <div class="right">
                <div class="preview" @click.stop="handleMenu('preview', item)">
                  <eye-outlined />
                  预览
                </div>
                <div class="menu">
                  <a-dropdown>
                    <div><more-outlined /></div>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <div
                            class="menuItem"
                            @click="handleMenu('edit', item)"
                          >
                            <form-outlined />
                            编辑
                          </div>
                        </a-menu-item>
                        <a-menu-item>
                          <div
                            class="menuItem"
                            @click="deleteTemplate(item.waterTemplateId)"
                          >
                            <delete-outlined />
                            删除
                          </div>
                        </a-menu-item>
                        <a-menu-item>
                          <div
                            class="menuItem"
                            @click.stop="item.isShowRrmark = !item.isShowRrmark"
                          >
                            <up-outlined
                              :class="[
                                item.isShowRrmark
                                  ? 'activeRemarkIcon'
                                  : 'remarkIcon',
                              ]"
                            />
                            备注
                          </div>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div style="margin: 135px auto" v-else>
        <a-empty description="暂无模板列表哦~" />
      </div>
      <a-pagination
        v-model:current="param.currPage"
        v-model:page-size="param.pageSize"
        :total="templateLists.total"
        :page-size-options="pageSizeOptions"
        show-size-changer
        @showSizeChange="onShowSizeChange"
        @change="onShowSizeChange"
      >
        <template #buildOptionText="props">
          <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
          <span v-else>全部</span>
        </template>
      </a-pagination>
    </a-spin>
  </div>
</template>

<script>
import { message } from 'ant-design-vue';
import {
  modelLists,
  generalDict,
  infoTemplate,
  deleteWaterTemplate,
} from '@/network/api';
import { aimToArr } from '@/util';
// import { Storage } from '@/util/storage.js';
import {
  FormOutlined,
  EyeOutlined,
  UpOutlined,
  MoreOutlined,
  DeleteOutlined,
} from '@ant-design/icons-vue';
export default {
  emits: ['editSvgTemplate'],
  data() {
    return {
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      spinning: false,
      param: {
        templateName: '',
        pageSize: 10,
        currPage: 1,
        status: undefined,
      },
      water_template_status: [],
      templateLists: {
        records: [],
      },
    };
  },
  created() {
    this.getGeneralDict('water_template_status').then((res) => {
      this.water_template_status = aimToArr(res);
      this.getTemplateList();
    });
  },
  mounted() {},
  methods: {
    deleteTemplate(id) {
      this.$httpRequest(
        deleteWaterTemplate,
        { waterTemplateId: id },
        'delete'
      ).then(() => {
        message.success('删除成功~');
        this.getTemplateList();
      });
    },
    handleMenu(val, item) {
      switch (val) {
        case 'preview':
          this.$router.push({
            name: 'CircuitPreview',
            params: {
              waterTemplateId: item.waterTemplateId,
              isShowSelect: '0',
              isShowBackButton: '1',
            },
          });
          break;
        case 'edit':
          this.spinning = true;
          this.$httpRequest(infoTemplate, {
            waterTemplateId: item.waterTemplateId,
          })
            .then((res) => {
              this.spinning = false;
              this.$emit(
                'editSvgTemplate',
                Object.assign(res.data, {
                  base64Data: item.backgroundImg,
                  waterTemplateId: item.waterTemplateId,
                  templateName: item.templateName,
                  remark: item.remark,
                })
              );
            })
            .catch(() => {
              this.spinning = false;
            });
          break;
      }
    },
    onShowSizeChange(current, pageSize) {
      this.param.pageSize = pageSize;
      this.param.currPage = current;
      this.getTemplateList();
    },
    getTemplateList() {
      this.spinning = true;
      this.$httpRequest(modelLists, this.param)
        .then((res) => {
          this.spinning = false;
          if (res.data?.records) {
            this.templateLists = res.data;
          } else {
            this.templateLists = [];
          }
        })
        .catch(() => {
          this.spinning = false;
        });
    },
    //get general dict
    getGeneralDict(name) {
      return new Promise((resolve) => {
        this.$httpRequest(generalDict, { dictType: name }).then((res) => {
          resolve(res);
        });
      });
    },
    searchTemplateList() {
      this.param.currPage = 1;
      this.getTemplateList();
    },
  },
  components: {
    FormOutlined,
    EyeOutlined,
    UpOutlined,
    MoreOutlined,
    DeleteOutlined,
  },
};
</script>
<style lang="less" scoped>
.ant-pagination {
  text-align: right;
}
.TemplateList {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-wrap;
  height: 600px;
  overflow: auto;
  margin: 20px auto;
  .templateItem {
    margin: 15px 30px 5px 30px;
    width: 440px;
    min-width: 300px;
    min-height: 160px;
    height: 260px;
    border-radius: 10px;
    background-color: #f2f2f2;
    transition: all 0.5s;
    .img {
      position: relative;
      width: 100%;
      height: 225px;
      border-radius: 10px 10px 3px 3px;
      overflow: hidden;
      .templateStatus {
        position: absolute;
        padding: 2px;
        top: 0;
        right: 0;
        color: white;
        border-radius: 2px;
        background: #52c41a;
      }
      .remarkContext {
        position: absolute;
        color: white;
        border-radius: 10px 10px 0 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.8);
        padding: 5px;
        height: 260px;
        overflow: auto;
        width: 100%;
      }
      .activeRemark {
        transition: all 0.5s;
        height: 100%;
      }
      .unactiveRemark {
        transition: all 0.5s;
        height: 0%;
        overflow: hidden;
        padding: 0;
      }
      // a-image {
      //   transition: 0.5s;
      //   transform: scale(1.1);
      // }
    }
    .templateName {
      border-radius: 0 0 10px 10px;
      padding: 10px;
      display: flex;
      .left {
        flex: 1.5;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .right {
        color: #555;
        flex: 1;
        text-align: right;
        display: flex;
        .preview {
          flex: 4;
        }
        .menu {
          flex: 1;
        }
      }
    }
  }
  .templateItem:hover {
    transition: all 0.5s;
    background-color: #4ba9edb3;
    cursor: pointer;
  }
}
.activeRemarkIcon {
  transition: 0.5s;
  transform: rotate(180deg);
}
.remarkIcon {
  transition: 0.5s;
  transform: rotate(0deg);
}
.menuItem:hover {
  background-color: #4ba9edb3;
}
.temlateSearch {
  display: fixed;
  top: 0;
}
</style>
